<template>
    <div class="talk-back-box" v-loading="loading">
        <div class="select-box">
            <el-select v-model="status" @change="statusChange">
                <el-option label="全部" :value="-3"></el-option>
                <el-option label="系统删除" :value="-2"></el-option>
                <el-option label="用户删除" :value="-1"></el-option>
                <el-option label="已禁用" :value="0"></el-option>
                <el-option label="显示中" :value="1"></el-option>
                <el-option label="草稿" :value="2"></el-option>
            </el-select>
        </div>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                fixed
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="commentContent"
                min-width="220"
                label="点评内容">
            </el-table-column>
            <el-table-column
                prop="relayCategory"
                label="回复类型">
            </el-table-column>
            <el-table-column
                prop="relayContent"
                min-width="220"
                label="回复内容">
                <template slot-scope="scope">
                    <div v-if="scope.row.relayCategory === '视频点评'">
                        <videoBox :url="scope.row.relayContent" :time="scope.row.duration" :img="scope.row.videoCover"/>
                        <div><el-button @click="goVideoDetail(scope.row)" type="text" size="small">{{scope.row.videoTitle || '查看视频'}}</el-button></div>
                    </div>
                    <div v-else>{{scope.row.relayContent}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="publishTime"
                width="108"
                :sortable="true"
                label="发布时间">
                <template slot-scope="scope">
                     <div style="text-align:center;">{{initTime(scope.row.publishTime)}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="status"
                :sortable="true"
                label="状态">
                <template slot-scope="scope">
                    <div style="color: #F56C6C;" v-if="scope.row.status === -2">系统删除</div>
                    <div v-else-if="scope.row.status === -1">用户删除</div>
                    <div style="color: #F56C6C;" v-else-if="scope.row.status === 0">
                        <div class="point red-point"></div>
                        <span>已禁用</span>
                    </div>
                    <div style="color:#67C23A;" v-else-if="scope.row.status === 1">
                        <span class="point"></span>
                        <span>显示中</span>
                    </div>
                    <div v-else>草稿</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="clickZanCount"
                width="90"
                :sortable="true"
                label="点赞数">
                <template slot-scope="scope">
                     <span>{{scope.row.clickZanCount || '0'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="relayCount"
                width="90"
                :sortable="true"
                label="回复数">
                <template slot-scope="scope">
                     <span>{{scope.row.relayCount || '0'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                min-width="150"
                label="举报">
                <template slot-scope="scope">
                    <div v-if="scope.row.report && scope.row.report.length">
                        <div v-for="(item, index) in scope.row.report" :key="index">
                            <span>{{item.text}}</span>
                            <span v-if="item.num">x{{item.num}}</span>
                        </div>
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === 1"><el-button @click="changeGameTalkStatus(scope.row, 0)" type="text" size="small" style="color:#F56C6C;">禁用</el-button></div>
                    <div v-else><el-button @click="changeGameTalkStatus(scope.row, 1)" type="text" size="small" style="color:#67C23A;">启用</el-button></div>
                    <div><el-button @click="goTalkDetail(scope.row)" type="text" size="small">查看详情</el-button></div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            tableData: [],
            loading: false,
            status: -3,
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0
        }
    },

    props: ['detail'],

    created () {
        if (this.detail && this.detail.userId) {
            this.getDetail()
        }
    },

    methods: {
        // 获取详情
        async getDetail () {
            if (this.loading) return
            this.loading = true
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userId: this.detail.userId
            }
            if (this.status !== -3) {
                params.status = this.status
            }
            let res = await this.$http.get('/user/getUserRelay', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count || res.data.length
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        initTime (time) {
            if (time) {
                return formatDate(new Date(time), 'YYYY-MM-DD HH:MM')
            } else {
                return '-'
            }
        },

        // 查看点评详情
        goTalkDetail (item) {
            if (item.relayCategory === '游戏点评回复') {
                this.$router.push({
                    path: '/game/gameTalkDetail',
                    query: {
                        id: item.relayId
                    }
                })
            } else if (item.relayCategory === '视频点评' || item.relayCategory === '视频点评回复') {
                this.$router.push({
                    path: '/video/videoTalkDetail',
                    query: {
                        id: item.relayId
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '未知操作'
                })
            }
        },

        // 查看视频详情
        goVideoDetail (item) {
            this.$router.push({
                path: '/video/videoDetail',
                query: {
                    id: item.videoId
                }
            })
        },

        // 更改视频状态
        async changeGameTalkStatus (item, status) {
            // 状态:0禁用 1启用
            let params = {
                commentId: item.id,
                status
            }
            let res
            if (item.relayCategory === '游戏点评回复') {
                res = await this.$http.post('/game/updateGameCommentStatus', params)
            } else {
                res = await this.$http.post('/video/updateVideoCommentStatus', params)
            }
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getDetail()
        },

        pageChange (val) {
            this.pageNum = val
            this.getDetail()
        },

        statusChange (val) {
            this.pageNum = 1
            this.getDetail()
        }
    }
}
</script>

<style lang="scss" scoped>
    .talk-back-box {
        .select-box {
            margin-bottom: 10px;
        }

        .point {
            display:inline-block;
            width:10px;
            height:10px;
            border-radius: 50%;
            background-color:#67C23A;
            margin-right:3px;
        }
        .red-point {
            background-color: #F56C6C;
        }

        .table-btn {
            color: #409EFF;
            cursor: pointer;
        }

        .tools {
            margin-top: 10px;
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
